<template>
  <div class="choose-time-box">
    <div>
      <template v-if="!chooseDis">
        <span v-for="(item,index) in timeList" :key="index" :class="timeChooseType==item.val? 'active' : '' " @click="chooseTimeType(item)">{{ item.name }}</span>
      </template>
      <template v-else>
        <span v-for="(item,index) in timeList" :key="index" :class="timeChooseType==item.val? 'active' : '' " style="opacity: 0.5;">{{ item.name }}</span>
      </template>

      <el-date-picker
        v-model="value1"
        style="width: 250px;margin-left:-20px;"
        size="small"
        type="daterange"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        unlink-panels
        :picker-options="pickerOptions"
        :clearable="false"
        @change="pickerChange"
      />
    </div>
  </div>
</template>

<script>
import {
  getToDay,
  getYesDay,
  getTime,
  getAbout7Day,
  getThisWeek,
  getThisWeekToDay,
  getThisMonthToDay,
  getAbout7DayToDay,
  getThisMonth,
  getThisYear,
  getThisYearToDay
} from '@/utils/moment.js'

import Cookies from 'js-cookie'

// import moment from 'moment'

import {
  timeChooseList
} from '@/settings.js'

export default {
  props: {
    timeLocSet: { // 是否改变全局的时间
      default: true,
      type: Boolean
    }

  },
  data() {
    return {
      chooseDis: false,
      pickerOptions: { // 时间选择器的限制
        disabledDate(time) {
          // 不能选择今天之后的日期；
          return time.getTime() > Date.now()
        }
      },
      value1: [],
      timeList: timeChooseList,
      timer: undefined,
      timeChooseType: '' // 选择时间的类型

    }
  },
  computed: {

  },
  watch: {

  },

  mounted() {
    const timeObj = this.$store.state.overview.timeObj
    let timeVal = {}
    if (this.$route.name.indexOf('verview') !== -1) {
      timeVal = timeObj.overViewTime
      this.timeChooseType = timeObj.overViewTimeType
    } else {
      timeVal = timeObj.financeTime
      this.timeChooseType = timeObj.financeTimeType
    }
    this.value1 = [timeVal.startTime, timeVal.endTime]
  },
  methods: {
    initTimeType(val) {
      let timeObj
      switch (val) {
        case 'today':
          timeObj = getToDay()
          break
        case 'yestoday':
          timeObj = getYesDay()
          break
        case 'week':
          timeObj = this.$route.name === 'personal' || this.$route.name === 'user_manager' || this.$route.name ===
              'Finance' ? getThisWeekToDay() : getThisWeek()
          break
        case '7day':
          timeObj = this.$route.name === 'personal' || this.$route.name === 'user_manager' || this.$route.name ===
              'Finance' ? getAbout7DayToDay() : getAbout7Day()
          break
        case 'month':
          timeObj = this.$route.name === 'personal' || this.$route.name === 'user_manager' || this.$route.name ===
              'Finance' ? getThisMonthToDay() : getThisMonth()
          break
        case 'year':
          timeObj = this.$route.name === 'personal' || this.$route.name === 'user_manager' || this.$route.name ===
              'Finance' ? getThisYearToDay() : getThisYear()
          break
      }

      return timeObj
    },

    // 点击了昨日，本周，本月等按钮改变了时间
    chooseTimeType(item) {
      this.chooseDis = true
      if (this.$route.name === 'typeOverview') {
        this.timer = setTimeout(() => {
          this.chooseDis = false
          clearTimeout(this.timer)
        }, 2000)
      } else {
        this.timer = setTimeout(() => {
          this.chooseDis = false
          clearTimeout(this.timer)
        }, 500)
      }
      const val = item.val
      this.timeChooseType = item.val
      var timeObj = this.initTimeType(item.val)
      if (this.timeLocSet) {
        const obj = { ...this.$store.state.overview.timeObj
        }
        if (this.$route.name.indexOf('verview') !== -1) {
          obj.overViewTime = {
            ...timeObj,
            overViewTimeType: item.val
          }
          this.$store.commit('overview/SET_YYY_Time', { ...obj,
            overViewTimeType: item.val
          })
        } else {
          obj.financeTime = {
            ...timeObj,
            financeTimeType: item.val
          }
          this.$store.commit('overview/SET_YYY_Time', { ...obj,
            financeTimeType: item.val
          })
        }
      } else {
        this.$emit('timeChange', timeObj)
      }

      this.value1 = [timeObj.startTime, timeObj.endTime]
    },

    // 时间选择器改变了时间
    pickerChange(data) {
      this.timeChooseType = undefined
      const timeObj = {
        startTime: data[0],
        endTime: data[1]
      }
      if (this.timeLocSet) {
        const obj = { ...this.$store.state.overview.timeObj
        }
        if (this.$route.name.indexOf('verview') !== -1) {
          obj.overViewTime = { ...timeObj
          }
          obj.overViewTimeType = undefined
        } else {
          obj.financeTime = { ...timeObj
          }
          obj.financeTimeType = undefined
        }
        this.$store.commit('overview/SET_YYY_Time', obj)
      } else {
        this.$emit('timeChange', timeObj)
      }
      this.value1 = [timeObj.startTime, timeObj.endTime]
    }
    /* hanldeTimeChange(data) {
                  const arr = []
                  arr[0] = new Date(data.startTime)
                  arr[1] = new Date(data.endTime)
                  this.value1 = arr

                  this.$emit('timeChange', [getTime({
                    time: arr[0]
                  }), getTime({
                    time: arr[1]
                  })])
                  // 记忆选择好的时间，下次登录||跳转到下级页面的时候可以用
                  if (this.$route.name === 'typeOverview' && this.cookieSet) {
                    // 如果是页面是数据概览页面就把用户选择的时间存储起来;
                    let storeTimeObj = {}
                    if (this.timeChooseType) {
                      // 如果是选择了时间组 就把类型存进去
                      storeTimeObj = { ...data,
                        timeChooseType: this.timeChooseType
                      }
                    } else {
                      // 如果是选择没有选择时间组，就只把时间存进去;
                      storeTimeObj = { ...data
                      }
                    }
                    // Cookies.set('Choose-time', storeTimeObj)
                    // this.$store.commit('overview/SET_TYPE_TIME', storeTimeObj)
                  }
                } */

  }
}
</script>

<style lang="scss" scoped="true">
  .choose-time-box {
    display: flex;
    align-items: center;
    justify-content: space-between;

    >div {
      span {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #666666;
        margin-right: 24px;
        cursor: pointer;

        &.active {
          color: #24BEBE;
        }

        &:last-of-type {
          margin-right: 42px;
        }
      }

    }
  }
</style>
